<template>
    <div>
        <el-form
            ref="form1"
            :model="form"
            :rules="rules"
            label-width="100px"
            label-position="top"
        >
            <el-row :gutter="30">
                <el-col :span="24">
                    <el-form-item label="新合同模版" prop="newTemplateObj">
                        <div>
                            <el-select
                                v-model="form.newTemplateObj"
                                value-key="value"
                                placeholder="请选择新合同模版"
                                style="width: 20%"
                            >
                                <el-option-group
                                    v-for="group in list"
                                    :key="group.label"
                                    :label="group.label"
                                    v-if="
                                        group.options &&
                                        group.options.length > 0
                                    "
                                >
                                    <el-option
                                        v-for="item in group.options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item"
                                    >
                                    </el-option>
                                </el-option-group>
                            </el-select>
                            <el-button
                                v-if="form.newTemplateObj"
                                style="margin-left: 15px"
                                type="text"
                                @click="goTemplateDetail"
                                >查看</el-button
                            >
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="说明" prop="remark">
                        <el-input
                            type="textarea"
                            placeholder="请输入说明"
                            v-model="form.remark"
                            maxlength="500"
                            :rows="5"
                            show-word-limit
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="附件" prop="annex">
                        <image-common
                            :up-type="2"
                            v-model="form.annex"
                            info="上传附件"
                        ></image-common>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import { otherOptionalTemplates } from "@/api/contractTemplate/templateUpdate";

export default {
    components: {},
    props: {
        currTemplate: {
            type: [String, Number],
            default: "",
        },
        customerId: {
            type: [String, Number],
            default: "",
        },
        applicationNo: {
            type: [String, Number],
            default: "",
        },
    },
    data() {
        return {
            form: {
                newTemplateObj: null,
                remark: null,
                annex: null,
            },
            rules: {
                newTemplateObj: [
                    {
                        required: true,
                        message: "请选择新合同模版",
                        trigger: "blur",
                    },
                ],
                remark: [
                    { required: true, message: "请输入说明", trigger: "blur" },
                ],
            },
            list: [],
        };
    },
    computed: {},
    watch: {
        customerId: {
            handler(val) {
                if (!this.isNull(val)) {
                    this.getTemplateList();
                } else {
                    this.list = [];
                }
            },
            immediate: true,
        },
    },
    methods: {
        //获取其他生效合同模版
        getTemplateList() {
            otherOptionalTemplates({
                currTemplate: this.currTemplate,
                customerId: this.customerId,
                applicationNo: this.applicationNo,
            }).then((res) => {
                this.list = res.data;
            });
        },
        // 查看合同模版详情
        goTemplateDetail() {
            this.$emit("getContractContent", this.form.newTemplateObj.value);
        },
        saveForm() {
            let flag = false;
            this.$refs["form1"].validate((valid) => {
                if (valid) {
                    console.log("表单1----", this.form);
                    flag = true;
                }
            });
            if (flag) {
                return this.form;
            }
        },
    },
    mounted() {
        // this.getTemplateList()
    },
};
</script>

<style lang="scss" scoped></style>
